<template>
	<view class="page">
		<view style="background-color: #fff; padding: 40rpx; margin: 20rpx;border-radius: 20rpx;">
			<u--form :model="form" :borderBottom="true" ref="uForm" labelPosition="top">
				<!-- <u-form-item prop="name" label="姓名" label-width="100" :label-style="leftIconStyle" label-position="top" label-align="left">
					<u-input v-model="form.name" placeholder="请输入真实姓名" />
				</u-form-item> -->
				<u-form-item :borderBottom="true" prop="mobile" label="手机号" labelWidth="200">
					<u-input border="none" v-model="form.mobile" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item :borderBottom="true" prop="verification_code" label="验证码" labelWidth="200">
					<view style="margin-top: 10rpx;">
						<u--input border="none" v-model="form.validate_code" placeholder="请输入验证码" />
					</view>
					<view slot="right">
						<u-count-down ref="countDown" :time="60 * 1000" format="ss" :autoStart="false"
							@change="onChange" @finish="onFinish">
							<view class="time">
								<text v-if="showGetCode" @click="getCode" style="color: #DA251B; font-size: 28rpx;">{{codeTips}}</text>
								<text v-else style="color: #c9c9c9; font-size: 28rpx;">{{codeTips}}</text>
							</view>
						</u-count-down>
					</view>
				</u-form-item>
				<u-form-item :borderBottom="true" label="新密码" labelWidth="200" >
					<u-input border="none" v-model="form.password" type="password" placeholder="请输入密码" />
				</u-form-item>
				<u-form-item :borderBottom="true" label="确认密码" labelWidth="200">
					<u-input border="none" v-model="form.repassword" type="password" placeholder="请确认密码" />
				</u-form-item>
			</u--form>
			<view style="margin-top: 90rpx;">
				<u-button @click="submit"
						shape="circle" 
						color="linear-gradient(to left, #DA251B, #E0190E)">确认修改</u-button>
			</view>
		</view>
		<!-- <u-loading mode="flower" size="100" :show="loadShow" style="display: flex;justify-content: center;align-items: center;"></u-loading> -->
	</view>
</template>

<script>
	import {authCode} from '@/common/tool.api.js'
	import {forgetPassword} from '@/common/auth.api.js'
	export default {
		data() {
			return {
				codeTips: '获取验证码',
				form: {
					name: '',
					mobile: '',
					validate_code: '',
					password: '',
					repassword: ''
				},
				leftIconStyle: {
					color: '#999'
				},
				showGetCode: true,
				seconds: 60,
				loadShow: true
			}
		},
		onLoad({name, mobileText}) {
			this.form.mobile = mobileText
			this.form.name = name
		},
		methods: {
			onChange(e) {
				if( e.seconds == 0){
					this.codeTips = "获取验证码";
				}else{
					this.codeTips = e.seconds + "秒后重新获取";
				}
			},
			onFinish(){
				this.$refs.countDown.reset();
				this.showGetCode = true
			},
			getCode() {
				uni.showLoading({
					title: '正在获取验证码'
				})
				
				if(!this.form.mobile){
					this.$u.toast('请输入手机号');
				}
				
				let __this = this;
				authCode({
					mobile: this.form.mobile,
				}).then(res => {
					uni.hideLoading()
					__this.$u.toast('验证码已发送');
					__this.$refs.countDown.start();
					__this.showGetCode = false
				})
			},
			submit() {
				uni.showLoading({
					title: ''
				})
				let __this = this;
				forgetPassword({
					...this.form
				}).then(res => {
					uni.hideLoading()
					// __this.$u.toast('绑定成功');

					uni.$emit('updateUserInfo',{msg:'刷新用户信息'})
					__this.$u.route({
						type: 'navigateBack',
						// delta: uni.getStorageSync('pageNum') + 1
					})

				})
			}
		}
	}
</script>


<style lang="scss">
	@import "../../static/iconfont.css";

	.page {
		background-color: #fff;
		min-height: 100Vh;
		width: 100vw;
	}

	.footer {
		margin-top: 32upx;
		font-size: 24upx;
		color: #666666;
		text-align: center;
		display: flex;
		justify-content: center;
	}

	// .leftIconStyle {
	// 	width: 30rpx;
	// 	height: 30rpx;
	// 	align-items: center;
	// }
</style>
